<template>
  <div class="service-team">
    <ul class="my">
      <li>
        <span>我的数据</span>
        <span>{{ quantity }} 套</span>
      </li>
      <li>
        <span>团队数据</span>
        <span>{{ quantity_all }} 套</span>
      </li>
    </ul>
    <add v-if="show_add" @save="saveAdd" />
    <tags :labels="labels" :current-label="currentLabel" @clickLabel="clickLabel" class="tag">
      <ul class="list">
        <li
          class="list-item border-bottom-1px"
          v-for="(item, index) in list"
          :key="index"
        >
          <div class="image">
            <img v-lazy="item.avatar" v-if="item.avatar" />
          </div>
          <div class="desc">
            <p class="level" v-if="true">[ {{ item.level0.name }} ] (价格: {{ +item.level0.price }})</p>
            <p class="nickname">ID: {{ item.id }}</p>
            <p class="nickname">昵称: {{ item.nickname }}</p>
            <!--<p class="mobile">电话: {{ item.mobile | mobileText }}</p>-->
            <p class="mobile">电话: {{ item.mobile }}</p>
            <p class="time" v-if="false">注册时间: {{ item.create_time }}</p>
            <p class="quantity">
              <span>个人: {{ item.quantity }}套</span>
              <span>团队: {{ item.quantity_all }}套</span>
            </p>
          </div>
          <!-- 必须是运营商才能报单的 -->
          <div class="add" v-if="current === 1 && +item.level0.value >= 101">
            <span @click="bao(item)">报单</span>
          </div>
          <div class="set" v-if="current === 1 && +item.level0.value < 101">
            <span @click="set(item)">设为运营商</span>
          </div>
        </li>
      </ul>
      <pull-up
        :loading="loading"
        :busy="queryList.busy"
        @loadMore="loadMore" />
      <loading :show="loading" />
    </tags>
  </div>
</template>

<script>
import Tags from '../components/Tags'
import Loading from '@/components/Loading'
import api from '@/api'
import base64 from '@/util/base64'
import PullUp from '@/components/PullUp'
import Add from './components/Add'
export default {
  name: 'ServiceTeam',
  components: {
    Tags,
    Loading,
    PullUp,
    Add
  },
  computed: {
    currentLabel() {
      return this.labels[this.current]
    }
  },
  filters: {
    mobileText(v) {
      if (v.length === 11) {
        return v ? v.substring(0, 3) + '****' + v.substring(7) : ''
      }
      return ''
    }
  },
  data() {
    return {
      labels: [],
      current: 0,
      list: [],
      loading: false,
      queryList: {},
      quantity_all: 0,
      quantity: 0,
      show_add: false,
      bao_id: 0,
      level: 0
    }
  },
  methods: {
    set(item) {
      this.$createDialog({
        type: 'confirm',
        title: '设置',
        content: '确定此操作吗',
        confirmBtn: {
          text: '确定',
        },
        cancelBtn: {
          text: '取消',
        },
        onConfirm: () => {
          api.User.baoSet({ id: item.id }).then(response => {
            this.$createToast({
              time: 500,
              txt: '操作成功'
            }).show()
            let { data } = response
            data = base64.parse(data)
            this.list.forEach(x => {
              if (x.id === item.id) {
                // console.log(x, item)
                // x.level0 = data.user.level0
                this.$set(x, 'level0', data.user.level0)
                console.log(x)
              }
            })
          })
        }
      }).show()
    },
    bao(item) {
      this.$createDialog({
        type: 'prompt',
        title: `报单(ID:${item.id})`,
        mask: true,
        prompt: {
          placeholder: '请输入报单的套数',
          // type: 'password',
          // eye: false,
          clearable: true,
        },
        onConfirm: (e, value) => {
          if (value === undefined || isNaN(+value)) {
            return this.$createToast({
              type: 'error',
              time: 1000,
              txt: '请输入正确的报单的套数',
            }).show()
          }
          api.User.baoAdd({ id: item.id, quantity: value }).then(() => {
            this.$createToast({
              time: 500,
              txt: '操作成功,等待审核',
            }).show()
            setTimeout(() => {
              this.$router.push('/service/my_bao/1')
            }, 800)
          }).catch(err => {
            this.$createToast({
              type: 'error',
              time: 3000,
              txt: err.message
            }).show()
          })
        },
        onCancel: (e) => {
        }
      }).show()
    },
    saveAdd() {
      this.show_add = false
    },
    add() {

    },
    loadMore() {
      setTimeout(() => {
        this.getList(true)
      }, 200)
    },
    getList(append = false) {
      if (this.queryList.busy === false) {
        this.queryList.page++
        this.loading = true
        this.queryList.busy = true
        api.My.teamList({
          ...this.queryList,
          type: this.current
        }).then(response => {
          let { data } = response
          data = base64.parse(data)
          if (data.list.length === 0) {
            this.queryList.busy = true
          } else {
            this.queryList.busy = false
            if (append) {
              this.list = this.list.concat(data.list)
            } else {
              this.list = data.list
            }
          }
        }).finally(() => {
          this.loading = false
        })
      }
    },
    createTags () {
      const tags = []
      tags[0] = '全部'
      tags[1] = '直推'
      tags[2] = '团队'
      this.labels = tags
    },
    clickLabel(index) {
      this.current = index
      this.init()
      this.queryList.busy = false
      this.list = []
      this.getList()
    },
    init() {
      this.queryList = {
        page: 0,
        pageSize: 20,
        busy: false
      }
    },
    getQuantity() {
      api.My.getTeamQuantity().then(response => {
        let { data } = response
        data = base64.parse(data)
        this.quantity = data.quantity
        this.quantity_all = data.quantity_all
      })
    }
  },
  created () {
    this.getQuantity()
    this.current = Number.parseInt(this.$route.params.type || 0)
    this.createTags()
    this.init()
    this.getList()
    this.level = this.$store.getters['ExecUser/info'].level
  },
  deactivated () {
    this.queryList.busy = true
  }
}
</script>

<style scoped lang="stylus">
.service-team
  background white
  padding-bottom 30px
  border-radius 10px
  .my
    padding 10px
    display flex
    justify-content space-around
    border-bottom 1px solid #f3f5f7
    //margin-bottom 10px
    li
      display flex
      flex-direction column
      span
        height 20px
        font-weight 700
  .list
    margin-bottom 15px
    .list-item
      display flex
      margin-bottom 15px
      padding 10px 1px
      position relative
      .set
        position absolute
        right 0
        top 0
        background $main_color
        color white
        padding 5px 10px
        border-radius 5px
      .add
        width 60px
        //background red
        display flex
        align-items center
        justify-content center
        span
          display block
          width 50px
          height 25px
          line-height 25px
          background red
          border-radius 5px
          color white
      .image
        width 60px
        img
          border-radius 50%
      .desc
        flex 1
        padding-left 15px
        //display flex
        //flex-direction column
        //justify-content center
        p
          height 20px
          text-align left
          &.level
            font-weight 700
          &.quantity
            span
              margin-right 15px
</style>
